<template>
  <!-- 联动配置 -->
  <div class="linkage-configuration bigTableStyle">
    <!-- 表单 -->
    <div class="linkage-configuration-form">
      <el-form ref="form" :inline="true" :model="form" label-width="1.5rem">
        <el-row>
          <el-col :span="6">
            <el-form-item label="变电站：">
              <el-select
                v-model="form.stationName"
                size="small"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="item in stationName_options"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="子系统：">
              <el-select v-model="form.sysId" size="small" placeholder="请选择" clearable filterable>
                <el-option
                  v-for="item in sysId_options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称：">
              <el-input v-model="form.deviceName" placeholder="请输入内容" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="endbox">
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button type="primary" @click="onAdd">新增</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="linkage-configuration-table">
      <el-table
        border
        :data="tableData"
        style="width: 100%"
        height="100%"
        @selection-change="handleSelectionChange"
        :row-class-name="tableRowClassName"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
      >
        <el-table-column prop="myIndex" label="序号" width="60"></el-table-column>
        <el-table-column prop="stationName" label="变电站" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="sysName" label="所属子系统" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="pointerName" label="设备类型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="pointerTypeName" label="点位类型" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="pointerName" label="点位名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" fixed="right" width="300">
          <template slot-scope="scope">
            <div class="centerbox">
              <el-button type="primary" @click="tableConfig(scope.row)">配置</el-button>
              <!-- <el-button
                type="primary"
                @click="tableEdit(scope.row)"
              >编辑</el-button>-->
              <el-button type="primary" @click="tableDelete(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="linkage-configuration-page centerbox elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 20, 30]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog title="新增联动配置"  top="8vh" :visible.sync="addStatus" width="12rem" :before-close="handleClose">
      <addPopUp @handleSave="handleSave" v-if="addStatus" @handleClose="handleClose" />
    </el-dialog>
    <!-- 配置弹窗 -->
    <el-dialog
      title="联动配置信息"
      top="8vh"
      :visible.sync="configStatus"
      width="12rem"
      :before-close="handleClose"
    >
      <configPopUp
        v-if="configStatus"
        @handleSave="handleSave"
        @handleClose="handleClose"
        :datas="configList"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { publicAPIModule } from "@/store/modules/public";
import addPopUp from "../../components/popup/addPopUp.vue";
import configPopUp from "../../components/popup/configPopUp.vue";
interface optionList {
  value: string;
  label: string;
}
interface tableDataType {
  station?: string;
  sysId?: string;
  deviceName?: string;
  deviceType?: string;
  pointerType?: string;
  pointerName?: string;
}
interface pagesType {
  pageSize: number;
  page: number;
  totalSize: number;
}
@Component({
  components: {
    addPopUp,
    configPopUp,
  },
})
export default class extends Vue {
  // 弹窗状态
  addStatus: boolean = false;
  editStatus: boolean = false;
  configStatus: boolean = false;
  // 表单
  public form: any = {
    stationName: "",
    sysId: "",
    deviceName: "",
  };
  // 表格数据
  tableData: Array<tableDataType> = [];
  tableSelect: Array<object> = [];
  //   分页
  pages: pagesType = {
    pageSize: 10,
    page: 1,
    totalSize: 30,
  };
  loading: boolean = true;
  configList = {};

  get stationName_options() {
    return publicAPIModule.stationList;
  }

  get area_options() {
    return publicAPIModule.getAreaDictList;
  }

  get sysId_options() {
    return publicAPIModule.querySubSystemList;
  }

  mounted() {
    this.fetch();
  }

  fetch() {
    var params: any = {
      deviceName: this.form.deviceName, //设备名称
      page: this.pages.page,
      size: this.pages.pageSize,
      station: this.form.stationName, //变电站id
      sysId: this.form.sysId, //子系统id
    };
    (this as any).$services
      .queryLinkage({ method: "post", data: params })
      .then((result: any) => {
        // console.log(result);
        let page = params.page;
        let size = params.size;
        console.log(params);

        this.tableData = result.data.records.map((v, i) => {
          v.myIndex = (page - 1) * size + i + 1;
          return v;
        });
        this.pages = {
          pageSize: result.data.size,
          page: result.data.current,
          totalSize: result.data.total,
        };
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
        this.$message({
          type: "warning",
          message: "服务器请求错误！",
        });
      });
  }

  // ------------------表单里的新增----------------
  onAdd() {
    this.addStatus = true;
  }
  // 表单里的查询
  onSearch() {
    this.fetch();
  }

  // -------------------表格选择事件--------------------
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //   表格里的配置
  tableConfig(row: any): void {
    // console.log(row);
    this.configList = row;
    this.configStatus = true;
  }
  //   表格里的删除
  tableDelete(row: any): void {
    // console.log(row);
    if (row.id) {
      this.$confirm("是否删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          (this as any).$services
            .deleteLinkage({
              method: "post",
              data: { id: row.id },
              postparams: true,
            })
            .then((result: any) => {
              // console.log(result);
              if (result.success) {
                this.$message({
                  type: "success",
                  message: result.message,
                });
              } else {
                this.$message({
                  type: "info",
                  message: result.message,
                });
              }
              this.onSearch();
            })
            .catch((err: object) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    }
  }
  //   -------------------分页----------------------------
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.fetch();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.fetch();
  }

  // -------------------------新增弹窗配置弹窗------------------
  handleSave(val: any) {
    console.log("val:", val);
    var params = val;
    (this as any).$services
      .configLinkage({ method: "post", data: params })
      .then((result: any) => {
        // console.log(result);
        if (result.success) {
          this.$message({
            type: "success",
            message: result.message,
          });
        } else {
          this.$message({
            type: "info",
            message: result.message,
          });
        }
        this.onSearch();
      })
      .catch((err: object) => {
        console.log(err);
      });
    this.addStatus = false;
    this.configStatus = false;
  }
  handleClose() {
    this.addStatus = false;
    this.configStatus = false;
  }
}
</script>

<style lang="scss" scoped>
.linkage-configuration {
  width: 18.8rem;
  height: 100%;
  &-form {
    width: 100%;
    height: 0.8rem;
    padding: 0.2rem 0 0 0;
    box-sizing: border-box;
  }
  &-table {
    width: 100%;
    height: calc(100% - 1.2rem);
  }
  &-page {
    width: 100%;
    height: 0.4rem;
  }
}
</style>
<style lang="scss">
.linkage-configuration {
  .el-form-item__content {
    width: calc(100% - 1.5rem);
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    width: 100%;
    margin-bottom: 0.2rem;
  }
  .el-button--primary {
    width: 1.1rem;
  }
}
</style>

